<template>
  <div>
    <!-- 准备导入导出按钮组 -->
    <div style="margin: 20px">
      <el-button type="primary" @click="dialogFormVisible = true">
        导入Excel
        <i class="el-icon-upload2 el-icon--right"></i>
      </el-button>
      <el-button type="primary" @click="handleExportDicts">
        导出Excel
        <i class="el-icon-download el-icon--right"></i>
      </el-button>
    </div>
    <!-- 展示数据字典树形数据的表格 -->
    <div>
      <el-table
        :data="dicts"
        style="width: 100%"
        row-key="id"
        border
        lazy
        :load="load"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column prop="name" label="名称" width="180">
        </el-table-column>
        <el-table-column prop="dictCode" label="编码" width="180">
        </el-table-column>

        <el-table-column prop="value" label="值"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              v-if="scope.row.parentId === '1'"
              @click="handleSave(scope.row)"
              >新增</el-button
            >
            <el-button
              size="mini"
              type="danger"
              v-if="scope.row.parentId != '1'"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
            <el-button size="mini" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 点击导入按钮，弹出上传excel的组件表单 -->
    <!-- 上传对话框 -->
    <el-dialog title="导入Excel" :visible.sync="dialogFormVisible">
      <div style="text-align: center">
        <el-upload
          class="upload-demo"
          drag
          :action="uploadPath"
          name="excel"
          :on-success="handleUploadSuccess"
          :on-error="handleUploadError"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">
            只能上传xls、xlsx或者csv文件
          </div>
        </el-upload>
      </div>
    </el-dialog>

    <!-- 新增数据字典对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogDictFormVisible"
      :close-on-click-modal="false"
    >
      <el-form>
        <el-form-item label="名称" :label-width="formLabelWidth">
          <el-input v-model="dict.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="值" :label-width="formLabelWidth">
          <el-input v-model="dict.value" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogDictFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSaveDict">提 交</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import dictApi from "@/api/dict";
export default {
  data() {
    return {
      dict: {},
      formLabelWidth: "120px",
      dialogDictFormVisible: false,
      title: "新增数据字典",
      uploadPath: process.env.VUE_APP_BASE_API + "/admin/core/dict/import",
      dialogFormVisible: false,
      dicts: [],
    };
  },
  created() {
    this.initData();
  },
  methods: {
    //新增对话框按钮提交事件
    handleSaveDict() {
      // console.log(this.dict);
      dictApi.save(this.dict).then((r) => {
        this.$message.success("新增成功");
        window.location.reload();
      });
    },

    //增删改按钮组事件函数
    handleSave(dict) {
      console.log("新增：pid=" + dict.id);
      //弹出对话框之前 将dict的id设置给dict对象
      this.dict.parentId = dict.id;
      //弹出新增dict的对话框
      this.dialogDictFormVisible = true;
    },
    handleEdit(dict) {
      console.log("更新：", dict);
    },
    handleDelete(dict) {
      // console.log("删除", dict);
      dictApi.delete(dict.id).then((r) => {
        this.$message.success(`删除【${dict.name}】成功`);
        //this.initData();
        //主动刷新页面
        window.location.reload();
      });
    },
    //====增删改按钮组事件函数end

    //页面加载时，初始化查询一级数据字典
    initData() {
      dictApi.listByPid(1).then((r) => {
        this.dicts = r.data.items;
      });
    },
    //延迟加载的函数：当点击有下一级数据的节点时，会触发此函数调用
    load(tree, treeNode, resolve) {
      //查询下一级数据字典，设置到resolve中即可渲染展示
      //获取当前节点的 id : tree.id可以获取到
      // console.log(tree, treeNode);
      dictApi.listByPid(tree.id).then((r) => {
        resolve(r.data.items);
      });
    },
    //导出按钮事件函数
    handleExportDicts() {
      //修改浏览器地址栏地址即可
      window.location =
        process.env.VUE_APP_BASE_API + "/admin/core/dict/export";
    },
    //上传组件 成功的回调: 响应报文状态码为200时回调
    handleUploadSuccess(response, file, fileList) {
      //不一定成功
      if (response.code === 0) {
        //提示成功，关闭对话框  response是响应体中的R对象的json
        //console.log(response);
        this.$message.success("导入成功");
      } else {
        this.$message.error("导入失败:业务失败");
      }
      //关闭对话框
      this.dialogFormVisible = false;
    },
    //上传组件 失败的回调: 响应报文状态码不是200时回调
    handleUploadError(err, file, fileList) {
      console.log(err);
      this.$message.error("导入失败:网络错误");
      //关闭对话框
      this.dialogFormVisible = false;
    },
  },
};
</script>
